<template>
  <div>
    <ul class="wanjia">
      <li @click="dialogVisible = true">会员编号：<span>{{detail.phone}}</span></li>
      <li @click="dialogVisible = true">会员姓名：<span>{{detail.name}}</span></li>
      <li @click="dialogVisible = true">可用积分：<span class="num">{{detail.integral}}</span></li>
     <!-- <li @click="dialogVisible = true">可用卡金：<span class="num">999</span> <span class="yuan">元</span> </li>-->
    </ul>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-table ref="filterTable" :data="tableData" border style="width: 100%">
          <el-table-column prop="cata" label="品类"
            :filters="[{ text: '香烟', value: '1' }, { text: '饮料', value: '2' }, { text: '食品', value: '3' }, { text: '茶水', value: '4' }, { text: '小吃', value: '5' }]"
            :filter-method="filterHandler">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="price" label="单价">
          </el-table-column>
          <el-table-column prop="kucun" label="库存">
          </el-table-column>
          <el-table-column label="操作" width="160" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary">添加</el-button>
              <el-button size="mini" class="add">已添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-table ref="filterTable" :data="tableData1" border style="width: 100%">

          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="price" label="单价">
          </el-table-column>
          <el-table-column label="数量" width="110" align="center">
            <template slot-scope="scope">
              <div class="flex">
                <i class="el-icon-remove"></i> <input type="text" placeholder="请输入">
                <i class="el-icon-circle-plus" @click="add(scope)"></i>
              </div>
            </template>
          </el-table-column>
          <!--<el-table-column label="操作" width="216" align="center" >
            <template slot-scope="scope">
              <el-button size="mini" type="danger">删除</el-button>
              <el-button size="mini" class="biaoqian" @click="open">标签</el-button>

              <el-button size="mini" class="add">转配</el-button>
            </template>
          </el-table-column>-->
        </el-table>
      </el-col>
    </el-row>

    <el-row type="flex" justify="space-between" class="btn">
      <el-col class="left">
        使用积分 <span class="money">214</span>积分 <!-- <span class="marg30">使用卡金</span> <span class="money">214</span> <span class="yuan">元</span>-->
      </el-col>
      <el-col class="right">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认结账</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>

export default {
  name: "",
  components: {  },
  props:{
    detail:{}
  },
  data() {
    return {
      tableData: [],
      tableData1: [{
        name: '利群',
        price: '14.0'
      }, {
        name: '利群',
        price: '14.0'
      }, {
        name: '利群',
        price: '14.0'
      }, {
        name: '利群',
        price: '14.0'
      }],
      dialogVisible: false
    }
  },
  created() {

  },
  methods: {
    cancel() {
      this.$emit('update:close', false)
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    open() {
      this.$confirm('暂无标签', '商品标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    confirm() {
      this.$message({
        message: '结账成功，消费信息....',
        type: 'success'
      });
      this.$emit('update:close', false)
    }
  }
};
</script>
<style>
.el-table-filter .el-checkbox:nth-of-type(2) .el-checkbox__label {

  background: url("../../../assets/image/yinliao.png") no-repeat 20px 3px;
  padding-left: 40px;
}

.el-table-filter .el-checkbox:nth-of-type(3) .el-checkbox__label {

  background: url("../../../assets/image/food.png") no-repeat 20px 3px;
  padding-left: 40px;
}

.el-table-filter .el-checkbox:nth-of-type(4) .el-checkbox__label {

  background: url("../../../assets/image/tea.png") no-repeat 20px 3px;
  padding-left: 40px;
}

.el-table-filter .el-checkbox:nth-of-type(5) .el-checkbox__label {

  background: url("../../../assets/image/xiaochi.png") no-repeat 20px 3px;
  padding-left: 40px;
}

.el-table-filter .el-checkbox:nth-of-type(1) .el-checkbox__label {

  background: url("../../../assets/image/yan.png") no-repeat 20px 3px;
  padding-left: 40px;
}

.el-table-filter__bottom button {
  padding: 0 10px;
}
</style>
<style scoped rel="stylesheet/scss" lang="scss">
.null {
  text-align: center;
  color: #9C9186;
  font-size: 18px;
}

.wanjia {
  margin-bottom: 15px;

  li {
    display: inline-block;
    font-size: 18px;
    color: #201D1B;
    margin-right: 30px;
    span {
      color: #CAAB62;
    }
    .num{
      color: #EB2B2B;
    }
    .yuan{
      color: #9C9186;
    }
  }
}

.add {
  background-color: #EBEEF5;
  color: #9C9186;

  &:visited,
  &:hover,
  &:active {
    background-color: #1085FF;
    color: #fff;
  }
}

.biaoqian {
  background-color: #CAAB62;
  color: #fff;
}

.flex {
  display: flex;
  align-items: center;

  i {
    color: #CAAB62;
    font-size: 20px;
  }

  input {
    font-size: 14px;
    color: #201D1B;
    border: none;
    width: 50px;
    margin-left: 5px;
  }
}

.btn {
  margin-top: 20px;
  .left{
    font-size: 18px;
    color: #201D1B;
    span:not(.marg30){
      color: #EB2B2B;
      font-size: 24px;
    }
    .marg30{
      margin-left: 30px;
    }
    .yuan{
      color: #9C9186;
      font-size: 18px;
    }
  }
  .right {
    text-align: right;
  }
}
</style>

